@import "../var";

.grid {
  .display-flex();
}

.grid--wrap {
  flex-wrap: wrap;
}

.grid--top {
  align-items: flex-start;
}

.grid--center {
  align-items: center;
}

.grid--bottom {
  align-items: flex-end;
}

.grid__cell {
  flex: 1;
  padding-right: @grid-gutter;
  padding-left: @grid-gutter;
}

.grid__cell--no-gutter {
  padding-right: .001em;
  padding-left: .001em;
}

.grid__cell--top {
  align-self: flex-start;
}

.grid__cell--center {
  align-self: center;
}

.grid__cell--bottom {
  align-self: flex-end;
}

.grid__cell--width-fixed {
  flex: 0 1 auto;
}

.grid__cell--fit {
  flex: 1;
}

.grid--full {
  flex-wrap: wrap;
}

.grid__cell--full {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}

.grid__cell--hidden {
  .display-none;
}

.grid__cell--visible {
  .display-initial();
}

.grid__cell--width(@width) {
  flex: 0 0 @width;
  max-width: @width;
}


